<!-- 发布评论 -->
<template>
  <div class="publish-box">
    <van-field
      v-model.trim="comment"
      rows="2"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
    <van-button
      plain
      :disabled="!comment"
      type="primary"
      block
      @click="onComment"
      >发布</van-button
    >
  </div>
</template>

<script>
import { Toast } from "vant";
import { addComment } from "../../../api/comment";
export default {
  name: "publishComment",
  data() {
    return {
      comment: "",
    };
  },
  /**
   * traget: 发布文章评论传文章id
   *         发布评论回复传评论id
   * articleId: 发布评论的回复也需要传文章id
   */
  props: ["traget", "articleId"],
  methods: {
    async onComment() {
      try {
        Toast.loading({
          message: "发布中",
          forbidClick: true,
        });

        const { data } = await addComment({
          target: this.traget.toString(),
          content: this.comment,
          art_id: this.articleId.toString(),
        });
        this.$emit("post-success", data.data.new_obj);

        Toast.success("发布评论成功");
        this.comment = "";
      } catch (error) {
        console.log("回复评论失败");
        console.log(error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.publish-box {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/.van-field {
  width: 80%;
  background-color: rgb(245, 247, 249);
}
/deep/.van-button {
  width: 20%;
  margin-left: 10px;
}
</style>